<template>
  <div class="costDetails">
    <div class="container pt-4">
      <div class="row">
        <div class="col-12">
          <div class="pointsRule">
            <ul id="list">
              <li style="z-index:6;background-image: linear-gradient(to right, #005bea ,#00c6fb)" class="green" @click="gotoHome()"><a><span>首页</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:3;background-color: #ffc107;"><a><em class="before"></em><span style="color: #4e555b;">数据录入</span><i style="background-color:#ffc107;"></i></a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="mt-4">
        <el-select v-model="value1" placeholder="请选择" @change="getList">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select
          v-model="value2"
          collapse-tags
          style="margin-left: 20px;margin-bottom: 20px;"
          placeholder="请选择"
          @change="getDataList">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <table class="table table-striped">
          <tbody style="text-align: center">
          <tr>
            <th>项目</th>
            <th v-for="index of thisMonth">{{index}}月</th>
            <th>2021年合计</th>
            <th>2020年合计</th>
          </tr>
          <tr>
            <td>总计</td>
            <td v-for="index of thisMonth">
              <input type="text" v-model="sumItem['month'+ index + 'Amount']"/>
            </td>
            <td>{{sumItem.yearAmount.toFixed(2)}}</td>
            <td>
              <input type="text" v-model="sumItem.lastYearAmount"/>
            </td>
          </tr>
          <tr v-for="item in dataList">
            <td>{{item.project}}</td>
            <td v-for="index of thisMonth">
              <input type="text" v-model="item['month'+ index + 'Amount']"/>
            </td>
            <td>{{item.yearAmount}}</td>
            <td>
              <input type="text" v-model="item.lastYearAmount"/>
            </td>
          </tr>
          </tbody>
        </table>
        <div class="row">
          <div class="col-12 text-right">
            <button class="btn btn-primary btn-sm" @click="addProject=true">新&nbsp;&nbsp;增</button>
            <button class="btn btn-success btn-sm" @click="save">提&nbsp;&nbsp;交</button>
          </div>
        </div>
      </div>
    </div>
    <!--弹出框-->
    <el-dialog title="新增项目" :visible.sync="addProject">
      <el-form :model="form">
        <div class="row">
          <div class="col-6">
            <el-form-item label="名称" :label-width="formLabelWidth" >
              <el-input v-model="form.project" placeholder="请输入名称" ></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="row">
          <div class="col-6">
            <el-form-item label="类别" :label-width="formLabelWidth">
              <el-select v-model="value1" placeholder="请选择" @change="getList">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="col-6">
            <el-form-item label="类别" :label-width="formLabelWidth">
              <el-select
                v-model="value2"
                collapse-tags
                style="margin-left: 20px;margin-bottom: 20px;"
                placeholder="请选择"
                @change="getDataList">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addProject = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "dataList",
    data() {
      return {
        dataList: [],
        thisMonth: 1,
        addProject: false,
        sumItem: {
          lastYearAmount: 0,
          month1Amount: 0,
          month2Amount: 0,
          month3Amount: 0,
          month4Amount: 0,
          month5Amount: 0,
          month6Amount: 0,
          month7Amount: 0,
          month8Amount: 0,
          month9Amount: 0,
          month10Amount: 0,
          month11Amount: 0,
          month12Amount: 0,
          nowMonthAmount: 0,
          yearAmount: 0
        },
        orgid: window.sessionStorage.getItem('orgid'),
        form:{
          id:'',
          project:'',
          yearAmount: null,
          typeId:''
        },
        formLabelWidth: '',
        options2: [],
        options: [{
          value: '3',
          label: '费用'
        },{
          value: '1',
          label: '业务'
        },{
          value: '4',
          label: '成本'
        }],
        proType1: [
          {
          value: '1',
          label: '早餐'
        }, {
          value: '2',
          label: '午餐'
        }, {
          value: '3',
          label: '晚餐'
        }, {
          value: '6',
          label: '职场生活'
        }, {
          value: '4',
          label: '外部客户'
        }, {
          value: '5',
          label: '外卖'
        }],
        proType2: [
          {
          value: '1',
          label: '早餐'
        }, {
          value: '2',
          label: '午餐'
        }, {
          value: '3',
          label: '晚餐'
        }, {
          value: '4',
          label: '职场生活'
        }],
        proType3: [
          {
          value: '1',
          label: '早餐'
        }, {
          value: '2',
          label: '食堂'
        }, {
          value: '3',
          label: '套餐'
        }, {
          value: '6',
          label: '点餐'
        }, {
            value: '5',
            label: '外卖'
          }, {
            value: '4',
            label: '农产品加工'
          }],
        proType4: [
          {
          value: '1',
          label: '猪'
        }, {
          value: '2',
          label: '鸡'
        }, {
          value: '3',
          label: '鸡蛋'
        }, {
          value: '4',
          label: '鸭'
        }, {
          value: '5',
          label: '羊'
        }],
        proType5: [
          {
          value: '1',
          label: '谷物种植'
        }, {
          value: '2',
          label: '豆类、油类和薯类种植'
        }, {
          value: '3',
          label: '蔬菜、食用菌及园艺作物种植及水果种植'
        }],
        proType6: [
          {
          value: '1',
          label: '住宿'
        }, {
          value: '2',
          label: '餐饮'
        }, {
          value: '3',
          label: '加工产品'
        }],
        costType: [
          {
            value: '1',
            label: '人工费用'
          },
          {
            value: '2',
            label: '固定费用和变动费用'
          },
          {
            value: '3',
            label: '福利费'
          }
        ],
        value1: '1',
        value2: '1',
        type: 0,
      }
    },
    created() {
      this.thisMonth = new Date().getMonth() + 1
      this.options2 = this['proType' + this.orgid]
      this.type = 1 + this.orgid + 1
      this.getDataList()
    },
    methods: {
      getList(item){
        if (item == 1) {
          this.options2 = this['proType' + this.orgid]
          this.getDataList()
        }else if (item == 4) {
          this.options2 = []
          this.value2 = ''
          this.getDataList()
        }else {
          this.options2 = this.costType
          this.getDataList()
        }
      },
      save() {
        this.dataList.forEach(val => {
          val.yearAmount = 0
          for(let i= 1; i <= this.thisMonth ;i++){
            val.yearAmount += parseFloat(val['month' + i + 'Amount'])
            // val.yearAmount += parseFloat(val['month' + i + 'Amount'])
          }
        })
        let data = JSON.stringify(this.dataList)
        this.$http.post(
          '/api/saveActual',
          data, {
            headers: {
              'Content-Type': 'application/json'
            }
          }).then(res => {
          this.getDataList()
          this.$message({
            type: "success",
            message: '保存成功'
          })
        })
      },
      add () {
        let data = []
        this.form.typeId = this.value1 + this.orgid + this.value2
        data.push(this.form)
        console.log(data)
        data = JSON.stringify(data)
        this.$http.post(
          '/api/saveActual',
          data, {
            headers: {
              'Content-Type': 'application/json'
            }
          }).then(res => {
          this.addProject = false
          this.getDataList()
          this.form = {
              id:'',
              project:'',
              yearAmount: null,
              typeId:''
          },
          this.$message({
            type: "success",
            message: '保存成功'
          })
        })
      },
      gotoHome: function(){
        this.$router.push("/index")
      },
      getDataList() {
        if (this.type !== 0) {
          this.type = this.value1 + this.orgid + this.value2
        }
        this.$http.get(
          '/api/getDataList',
          {
            params: {
              type: this.type
            }
          }
        ).then(res => {
          if (res.data.length > 0) {
            this.sumItem = {
              lastYearAmount: 0,
              month1Amount: 0,
              month2Amount: 0,
              month3Amount: 0,
              month4Amount: 0,
              month5Amount: 0,
              month6Amount: 0,
              month7Amount: 0,
              month8Amount: 0,
              month9Amount: 0,
              month10Amount: 0,
              month11Amount: 0,
              month12Amount: 0,
              nowMonthAmount: 0,
              yearAmount: 0
            }
            res.data.forEach(val => {
              for(let i=1; i <= this.thisMonth ;i++){
                this.sumItem['month' + i + 'Amount'] += parseFloat(val['month' + i + 'Amount'])
              }
              this.sumItem.yearAmount += parseFloat(val.yearAmount)
              this.sumItem.lastYearAmount += parseFloat(val.lastYearAmount)
            })
          }
          // this.sumItem.yearAmount = parseFloat(this.sumItem.yearAmount).toFixed(1)
          this.dataList = res.data
        })
      }
    }
  }
</script>

<style scoped>
  .costDetails {
    height: 270%;
  }
  input {
    width: 100px;
    border: white 1px solid;
    text-align: center;
  }
</style>
